<style scoped>
.com-wapper{
  width:100%;
  line-height:36px;
  position: relative;
}

.com-box{
  width:100%;
  line-height:36px;
  display: flex;
  align-items: center;
}

.disable{
  opacity: 0.3;
}

.active-box{
  width:15px;
  height:15px;
  line-height:15px;
  text-align:center;
  border:1px solid #FFF;
  color:#FFF;
  cursor: pointer;
}

.label{
  font-size:12px;
  color:#FFF;
  margin-left:7px;
}

.able-mask{
  position: absolute;
  top:0px;
  left:0px;
  width:100%;
  height:100%;
}

.color-box{
  width:188px;
  height:12px;
  border-radius: 6px;
  position: relative;
  margin-left :auto;
  cursor: pointer;
}

.color{
  width:188px;
  height:12px;
  border-radius: 6px;
  background-color: #b55a5a;
  position: absolute;
}

.pk{
  position: fixed;
  left:-325px;
  top:12px;
  z-index: 99999;
}
</style>
<template>
<div class="com-wapper">
  <div class="com-box" :class="{'disable':!enable}">
    <div class="active-box" @click="ableHandle">{{enable?'√':''}}</div>
    <div class="label">
      {{label}}
    </div>
    <div class="color-box">
      <div class="color" :style="{'background-color':value || color}" @click="showHandle" ref="colort"></div>
      <color-picker
        head="颜色选择器"
        acceptLabel="确定"
        cancelLabel="取消"
        currentLabel="当前"
        newLabel="最新"
        :value="color"
        @input="inputHandle"
        @ok="okHandle"
        @cancel="colorPickerShow=false"
        v-show="colorPickerShow"
        class="pk"
        :style="{'top':tmpTop+'px','left':tmpLeft+'px'}"
      />
    </div>
  </div>
  <div class="able-mask" @click="ableHandle" v-if="!enable"></div>
</div>
</template>
<script>
import { Photoshop } from 'vue-color'
export default {
  props: {
    label: {
      type: String,
      default: '颜色'
    },
    value: {
      type: String
    },
    def: {
      type: String,
      default: '#FFF'
    }
  },

  computed: {
    enable () {
      return !(typeof this.value === 'undefined' || this.value === null)
    }
  },
  components: {
    'color-picker': Photoshop
  },
  data () {
    return {
      colorPickerShow: false,
      color: '#b55a5a',
      dataCache: this.def,
      tmpTop: 0,
      tmpLeft: 0
    }
  },
  methods: {
    showHandle () {
      let dom = this.$refs['colort']
      this.tmpTop = this.getPos(dom).top + 12
      this.tmpLeft = this.getPos(dom).left
      this.colorPickerShow = true
    },
    inputHandle (e) {
      this.color = e.hex
    },
    okHandle () {
      this.$emit('input', this.color)
      this.colorPickerShow = false
    },
    getPos (dom) {
      let pos = { top: 0, left: 0 }

      while (dom) {
        pos.left += dom.offsetLeft
        pos.top += dom.offsetTop

        dom = dom.offsetParent
      }

      return pos
    },
    // ableHandle
    ableHandle () {
      if (this.enable) {
        this.colorPickerShow = false
        this.dataCache = this.color
        this.$emit('input', null)
      } else {
        this.$emit('input', this.dataCache)
      }
    }
  },
  watch: {
    value () {
      if ((typeof this.value !== 'undefined') && (this.value !== null)) {
        this.color = this.value
      }
    }
  }
}
</script>
